<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>码猿博客</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="sweetAlert/sweetalert.css">
    <link rel="ICON" href="image/icon1.png">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
</head>
<body style="background-color: #f1f1f1">
<div style="margin-top: 50px;margin-left: 50px">
    <a href="./my_home" title="码猿主页"><img src="./image/projectImage/logo2.png" width="160" height="80" alt=""></a>
</div>
<div class="login-modal" id="login_modal">
    <div class="login-header">
        <h1>
            <span class="active-title">忘记密码</span>
        </h1>
    </div>
    <div class="login-body m-t-30">
        <div class="clearfix">
            <div class="f-l" v-cloak>
                <div class="input-group">
                    <input v-model="forgetPass.account" type="text" class="form-control" placeholder="请输入忘记密码的账号">
                </div>
                <p class="my-tip-wrap f-r color-red">{{formValidationAccount}}</p>
                <div class="verification-box">
                    <input v-model="forgetPass.verification" type="text" placeholder="请输入邮箱收到的验证码">
                    <a href="javascript:;" v-show="isEmailOk==false" class="btn btn-default" v-on:click="validation_btn_one()">发送验证码</a>
                    <a href="javascript:;" v-show="isEmailOk==true" disabled="disabled" class="btn btn-default" style="border-color: limegreen">{{timer}}</a>
                </div>
                <p class="my-tip-wrap color-limegreen">{{formValidationEmail}}</p>
                <div class="input-group m-b-20">
                    <input v-model="forgetPass.password" type="password" class="form-control" placeholder="请输入新的密码">
                </div>
                <div class="input-group m-b-5">
                    <input v-model="forgetPass.rePassword" type="password" class="form-control" placeholder="请确认您的密码">
                </div>
                <p class="my-tip-wrap text-right color-red p-r-5">{{formValidation}}</p>
                <div class="my-group clearfix m-t-5">
                    <input type="button" v-show="isEmailOk==true"  value="确定"  class="sign-btn"  v-on:click="validation_btn_two">
                    <input type="button" v-show="isEmailOk==false" value="确定"  class="sign-btn" disabled>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery-3.0.0.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="sweetAlert/sweetalert.min.js"></script>
<script src="js/vue.js"></script>
<script>
    var vm_forgetPass=new Vue({
        el:'#login_modal',
        data:{
            incorrect:false,
            forget_title:'忘记密码',
            isEmailOk:false,
            forgetPass:{
                account:'',
                verification:'',
                password:'',
                rePassword:''
            },
            formValidation:'',
            formValidationEmail:'',
            formValidationAccount:'',
            timer: '',       //默认倒数300秒
            stop : false,   //默认是停止的，但界面加载之后会变成false
            Interval:null  //setInterval的对象
        },
        methods : {
            validation_btn_one:function () {
                var account=this.forgetPass.account;
                if(account=='') {
                    this.formValidation.account= '请输入忘记密码的账号';
                }else{
                    $.ajax({
                        type:"GET",
                        url:"./get_allAccount",
                        data:"account="+account,
                        success:function (data) {
                            if(data){
                                vm_forgetPass.formValidationAccount='无此账号';
                            }else{
                                vm_forgetPass.formValidationAccount='';
                                vm_forgetPass.formValidationEmail='验证码已发至关联邮箱，请及时输入验证码';
                                vm_forgetPass.isEmailOk=true;
                                vm_forgetPass.timer=300;
                                startTimer();
                                $.ajax({
                                    type:"GET",
                                    url:"/send_email",
                                    data:"account="+account,
                                    success:function (data) {
                                    }
                                });

                            }
                        }
                    });
                }
            },
            validation_btn_two:function () {
                if(this.forgetPass.verification=='') {
                    this.formValidation= '请输入验证码';
                }else if(this.forgetPass.password=='') {
                    this.formValidation= '请输入新密码';
                }else if(this.forgetPass.rePassword=='') {
                    this.formValidation= '请确认密码';
                }else if(this.forgetPass.rePassword!=this.forgetPass.password) {
                    this.formValidation= '两次密码不一致';
                }else{
                    var JsonStr={
                        account:'',
                        randomString:'',
                        newPassword:'',
                    };
                    JsonStr.account=this.forgetPass.account;
                    JsonStr.randomString=this.forgetPass.verification;
                    JsonStr.newPassword=this.forgetPass.password;
                    $.ajax({
                        type:"GET",
                        url:"./verify_password",
                        data:JsonStr,
                        success: function (data) {
                            if(data) {
                                succeed_result("设置");
                            } else {
                                vm_forgetPass.isEmailOk=false;
                                vm_forgetPass.formValidation.validation= '验证码无效或错误';
                            }
                        },
                        error: function(xhr, status, error) {
                            fail_result("请求服务器", function() {});
                        }
                    });
                }
            }
        }
    });

    function startTimer() {
        //如果是false就开始倒计时，如果是true就停止倒计时
        if(vm_forgetPass.stop == false)
        {
            vm_forgetPass.Interval = setInterval(update,1000);
        }
        else
        {
            clearInterval(vm_forgetPass.Interval);
        }
        vm_forgetPass.stop = !vm_forgetPass.stop;

        function update(){
            if(vm_forgetPass.timer <= 0)
            {
                vm_forgetPass.isEmailOk=false;
                vm_forgetPass.formValidation.verification= '';
                vm_forgetPass.timer = 300;
            }
            else{
                vm_forgetPass.timer--;
            }
        }
    }

    //提交数据返回失败的结果后
    function fail_result(operation_name, fn) {
        swal({
            title: operation_name + "失败！",
            text: "请重新操作",
            type: "error",
            confirmButtonText: "确定",
        }, function(bool) {
            fn();
        });
    }

    //在后端返回处理成功的信息后询问是否要刷新页面
    function succeed_result(operation_name) {
        swal({
            title: operation_name + "成功！",
            text: "即将跳转回主页",
            type: "info",
            confirmButtonText: "刷新",
        }, function(bool) {
            if(bool) {
                window.location.href='./my_home'
            }
        });
    }
</script>
</body>
</html>